<template>
  <div class="xy-select-img" :class="IndividualizeClass">
    <ul class="clearfix">
      <li v-for="(item, index) in imageList" v-if="type == 'normal'" :key="index">
        <img class="img pt" @click="preview(index)" v-if="item" :src="item | ossImg" alt="">
        <p v-else class="txtC">上传中...</p>
        <b class="pt absolute block" @click="removeImg(index)"></b>
      </li>
      <li v-show="(this.imageList.length < maxlength) && (type =='normal')">
        <i class="el-icon-plus absolute font-size20 color-999"></i>
        <input type="file" class="opacity0 pt block" @change="change" accept="image/jpeg,image/jpg,image/png">
      </li>

      <li v-for="(item, index) in imageList" class="showImg" v-if="type == 'show'" :key="index">
        <img class="img pt" @click="preview(index)" :src="item | ossImg" alt="">
      </li>

      <li class="circle" v-if="type == 'circle'">
        <img v-show="!imageUrl" class="img border-radius100" :src="DefaultImg" alt="">
        <img v-show="imageUrl" class="img border-radius100" :src="imageUrl | ossImg" alt="">
        <input type="file" class="opacity0 pt block" @change="change" accept="image/jpeg,image/jpg,image/png">
      </li>

      <li class="circle" v-if="type == 'circleAdd'">
        <i class="el-icon-plus absolute font-size20 color-999" v-if="!imageUrl"></i>
        <img v-if="imageUrl" class="img border-radius100" :src="imageUrl | ossImg" alt="">
        <input type="file" class="opacity0 pt block" @change="change" accept="image/jpeg,image/jpg,image/png">
      </li>
    </ul>

    <el-dialog :visible.sync="dialogVisible" title="预览" class="dialog" width="76%" :close-on-click-modal="false" :close-on-press-escape="false">
      <ul class="clearfix" v-if="imageList.length > 1">
        <li v-for="(item, index) in imageList" :key="index">
          <img class="img pt" @click="preview(index)" v-if="item" :src="item | ossImg" alt="">
        </li>
      </ul>
      <div class="txtC" style="overflow:auto;max-height:600px;">
        <img :src="dialogImageUrl" :style="{transform: 'rotate('+ rotateValue +'deg)'}" alt="" @mousewheel="mousewheel">
      </div>
      <div class="txtC mgt20">
        <el-button @click="changeImg('left')">逆时针旋转90度</el-button>
        <el-button @click="changeImg('right')">顺时针旋转90度</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  // list 是初始化时父组件传过来的图片列表, [1.jpg, 2.png...]
  // maxlength 最多上传多少张图片, 比如常见的9张
  // type 为 dialog 时, 在dialog上， 预览图片会新开一个页面。 用于dialog 弹框
  // type 为 circle 时，不需要传 list数组， 传单张图片用 value。 用于上传头像, 必须传 imageUrl 可以为空
  // type 为 circleAdd 时，是一个圈，里面有个+号。其它与circlr一致
  import constant from '../util/constant'
  import DefaultImg from '../assets/img/nav-portrait.png'
export default  {
    name: "SelectImg",
    props: {
      imageUrl: {
        type: String,
        default: ''
      },
      type: {
        type: String,
        default: 'normal'
      },
      list: {
        type: Array,
        default() {
          return []
        }
      },
      maxlength: {
        type: [String, Number],
        default: 1
      },
      IndividualizeClass: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        url: constant.baseURI + '/upload/img',
        dialogImageUrl: '',
        dialogVisible: false,
        imageList: this.list,
        DefaultImg: DefaultImg,
        lock: false,
        rotateValue: 0
      }
    },

    methods: {
      mousewheel(e) {
        let zoom = parseInt(e.target.style.zoom) || 100
        zoom += e.wheelDelta / 12
        if (zoom < 30 || zoom > 500) return
        e.target.style.zoom = zoom + '%'
        e.preventDefault()
        return false
      },

      change(e) {
        var e = e || event
        var el = e.target || e.srcElement
        var file = el.files[0]
        if (!file) return
        if (this.lock) {
          el.value = ''
          return this.$message({ message: '图片上传中...', duration: 1000 })
        }

        this.lock = true
        if (file.size / 1024 / 1024 > 2) {
          return this.$message({ message: '图片大小不能超过 2MB', duration: 1000 })
        }

        var reg = /\.(jpg|jpeg|png)$/i
        if (!reg.test(file.name)) {
          return this.$message({ message: '请上传jpg或png图片', duration: 1000 })
        }

        if (this.type == 'normal') {
          this.imageList.push('')
        }

        var formData = new FormData()
        formData.append('image', file)
        this.$http.post(this.url, formData).then((res) => {
          if (this.type == 'normal') {
            this.imageList.pop()
          }

          this.lock = false
          if (res.data) {
            if (this.type == 'normal') {
              this.imageList.push(res.data)
              this.$emit('change', this.imageList)
            } else {
              this.$emit('update:imageUrl', res.data);
              this.$emit('change', res.data)
            }

          } else {
            this.$message.error({ message: '图片上传失败', duration: 1000 })
          }
        }).catch(() => {
          this.imageList.pop()
          this.lock = false
          this.$message.error({ message: '图片上传失败', duration: 1000 })
        })
      },

      removeImg(n) {
        if (this.lock && (n + 1) == this.imageList.length) {
          return this.$message({ message: '图片上传中...', duration: 1000 })
        }
        this.imageList.splice(n, 1)
        this.$emit('change', this.imageList)
      },

      preview(n) {
        this.dialogImageUrl = this.imageList[n]
        if (this.type == 'dialog') {
          this.$utils.linkTo(this.dialogImageUrl)
        } else {
          this.dialogVisible = true
        }
      },

      changeImg(n) {
        if(n == 'left'){
          this.rotateValue = this.rotateValue - 90
        }
        if(n == 'right'){
          this.rotateValue = this.rotateValue + 90
        }
      }
    },

    watch: {
      'list'(arr) {
        this.imageList = arr
      }
    }
  }
</script>
